@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&display=swap");
                    @import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&family=Roboto:ital@1&display=swap");
                    * {
                        margin: 0;
                        padding: 0;
                    }
                    
                    html {
                        scroll-behavior: smooth;
                    }
                    
                    .navbar {
                        /* background-color: rgb(246, 174, 6); */
                        display: flex;
                        justify-content: center;
                        position: sticky;
                        top: 0;
                        align-items: center;
                        width: 100%;
                        height: 70px;
                        background-color: rgb(115, 215, 255);
                    }
                    
                    .holdingcontainer {
                        width: 100%;
                        display: flex;
                        box-sizing: border-box;
                        margin-top: 15vh;
                        font-family: 'Baloo 2', cursive;
                    }
                    
                    .container1 {
                        flex: 1;
                        background: white;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                        top: 0;
                    }
                    
                    .container2 {
                        flex: 1;
                        background: white;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                    }
                    
                    .container3 {
                        flex: 1;
                        background: white;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                    }
                    
                    .container4 {
                        flex: 1;
                        background: white;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                        font-family: "Baloo 2 ", cursive";

                    }
                    
                    .holdingcontainer2 {
                        width: 100%;
                        display: flex;
                        box-sizing: border-box;
                        margin-top: 15vh;
                        font-family: 'Baloo 2', cursive5;
                        width: 80%;
                        padding: 10px;
                        margin: 1px;
                    }
                    
                    .container1-sec {
                        flex: 1;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                        margin-top: 25px;
                    }
                    
                    .container2-sec {
                        flex: 1;
                        color: black;
                        padding: 30px;
                        font-size: 25px;
                        flex-direction: row;
                        border: gray;
                        margin: 50px;
                        height: 65%;
                        text-align: center;
                        margin-top: 25px;
                    }
                    
                    .nav-list {
                        align-items: center;
                        height: 55px;
                        width: 95%;
                        display: flex;
                        justify-content: center;
                    }
                    
                    .nav-list li {
                        list-style: none;
                        padding: 25px;
                        cursor: pointer;
                        font-size: 25px;
                        font-family: "Baloo 2", cursive;
                    }
                    
                    .nav-list li:hover {
                        list-style: none;
                        padding: 25px;
                        cursor: pointer;
                        /* text-shadow: 2px 1.5px 4px black; */
                        background-color: rgb(9, 127, 182);
                        transition: 0.5s;
                    }
                    
                    .nav-list li a {
                        text-decoration: none;
                        color: rgb(0, 59, 114);
                    }
                    
                    .nav-list li a:hover {
                        color: #fff;
                    }
                    
                    .sub-menu {
                        display: none;
                    }
                    
                    .navbar ul li:hover .sub-menu {
                        display: block;
                        opacity: 0;
                        position: absolute;
                        background-color: rgb(115, 215, 255);
                        margin-top: 15px;
                        margin-left: -25px;
                    }
                    
                    .navbar ul li:hover .sub-menu:hover {
                        display: block;
                        opacity: 0;
                        position: absolute;
                        background-color: rgb(115, 215, 255);
                        margin-top: 15px;
                        margin-left: -25px;
                    }
                    
                    .navbar ul li:hover .sub-menu:nth-child(1) {
                        animation: animate 300ms ease-in-out forwards;
                        animation-delay: -150ms;
                    }
                    
                    .navbar ul li:hover .sub-menu:nth-child(2) {
                        animation: animate 300ms ease-in-out forwards;
                        animation-delay: -0ms;
                    }
                    
                    .navbar ul li:hover .sub-menu:nth-child(3) {
                        animation: animate 300ms ease-in-out forwards;
                        animation-delay: 300ms;
                    }
                    
                    .navbar ul li:hover .sub-menu:nth-child(4) {
                        animation: animate 300ms ease-in-out forwards;
                        animation-delay: 450ms;
                    }
                    
                    .navbar ul li:hover .sub-menu:nth-child(5) {
                        animation: animate 300ms ease-in-out forwards;
                        animation-delay: 5050ms;
                    }
                    
                    @keyframes animate {
                        0% {
                            opacity: 0;
                            transform: translateX(-100px);
                        }
                        30% {
                            transform: translateX(60px);
                        }
                        50% {
                            transform: translateX(80px);
                        }
                        70% {
                            transform: translateX(20px);
                        }
                        100% {
                            opacity: 1;
                            transform: translateX(0px);
                        }
                    }
                    
                    .navbar ul li:hover .sub-menu ul {
                        border-bottom: 1px dotted #fff;
                    }
                    
                    .navbar ul li:hover .sub-menu ul li {
                        border-bottom: 1px dotted #fff;
                    }
                    
                    #LOGO {
                        width: 5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        cursor: pointer;
                    }
                    
                    #LOGO img {
                        width: 33px;
                        border: 3px solid white;
                    }
                    
                    .burger {
                        position: absolute;
                        cursor: pointer;
                        right: 5%;
                        top: 14px;
                        display: none;
                    }
                    
                    .line {
                        width: 33px;
                        background-color: white;
                        height: 4px;
                        margin: 3px 3px;
                    }
                    
                    .background {
                        background: rgba(0, 0, 0, 0.7) url(../img/Abdul\ Bari\ Home\ BG.jpg);
                        background-size: cover;
                        background-blend-mode: gray;
                        background-attachment: fixed;
                        height: 100vh;
                    }
                    
                    .section-one {
                        height: 100vh;
                    }
                    
                    .logohome {
                        display: flex;
                        margin-right: 25%;
                        margin-top: 50%;
                        padding-top: 13%;
                        /* vertical-align: middle;
  display: inline-block; */
                        margin: auto;
                    }
                    
                    .section-one {
                        height: 100vh;
                    }
                    
                    .section2 {
                        background-color: rgb(40, 116, 216);
                    }
                    
                    .thirdsection {
                        display: flex;
                        justify-content: center;
                        height: 100vh;
                    }
                    
                    .text {
                        text-align: center;
                        width: 25%;
                        margin-left: 40%;
                        font-family: "Baloo 2", cursive;
                    }
                    
                    .passage {
                        border: 2px solid black;
                        border-radius: 6px;
                        padding: -35px;
                    }
                    
                    .button {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 50px;
                        font-family: "Baloo 2", cursive;
                        height: 25px;
                        color: #fff;
                    }
                    
                    .button:hover {
                        /*  color: rgb(5, 211, 73); */
                        color: rgb(207, 221, 17);
                        transition: 0.6s ease-out;
                        cursor: default;
                    }
                    
                    .button2 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 50px;
                        font-family: "Baloo 2", cursive;
                        height: 25px;
                        color: #fff;
                    }
                    
                    .button2:hover {
                        /*  color: rgb(5, 211, 73); */
                        color: brown;
                        transition: 0.6s ease-out;
                        cursor: default;
                    }
                    
                    .button3 {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 50px;
                        font-family: "Baloo 2", cursive;
                        height: 25px;
                        color: #fff;
                    }
                    
                    .button3:hover {
                        /*  color: rgb(5, 211, 73); */
                        color: rgb(238, 255, 0);
                        transition: 0.6s ease-out;
                        cursor: default;
                    }
                    
                    .onebox {
                        border: 2px solid black;
                        border-radius: 9px;
                        margin: auto;
                        margin-right: 45%;
                        margin-left: 43%;
                        display: flex;
                    }
                    
                    .logohomee {
                        width: 0px;
                    }
                    
                    .section3BG {
                        background-image: url(../img/Abdul\ Bari\ page\ 3\ BG.jpg);
                        background-size: cover;
                        background-blend-mode: gray;
                        background-attachment: fixed;
                    }
                    
                    .section4 {
                        background-color: rgb(178, 212, 24);
                    }
                    
                    .section5BG {
                        background-image: url("../img/Abdul\ Bari\ page\ 5\ BG.jpg");
                        background-size: cover;
                        background-blend-mode: gray;
                        background-attachment: fixed;
                    }
                    
                    .section6 {
                        background-color: rgb(187, 31, 148);
                    }
                    
                    .section7BG {
                        background-image: url(../img/Abdul\ Bari\ page\ 7BG.jpg);
                        background-size: cover;
                        background-blend-mode: gray;
                        background-attachment: fixed;
                    }
                    
                    #parent {
                        position: relative;
                        width: 100%;
                    }
                    
                    .home-character-img {
                        height: auto;
                        width: auto;
                    }
                    
                    .character-img {
                        margin-left: 25%;
                        margin-top: 7%;
                    }
                    
                    .Playlist {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-top: 35px;
                    }
                    
                    .btn-sm {}
                    
                    .Playlist-btn {
                        padding: 20px 55px;
                        font-size: 25px;
                        border-radius: 30px;
                        border: 3.5px solid rgb(4, 35, 107);
                        box-shadow: 5px 4px 10px;
                        background-color: rgb(0, 100, 231);
                        color: rgb(223, 249, 255);
                    }
                    
                    .Playlist-btnn {
                        padding: 20px 55px;
                        font-size: 25px;
                        background-color: rgb(248, 196, 26);
                        border-radius: 30px;
                        border: 3.5px solid rgb(98, 109, 4);
                        color: rgb(37, 23, 4);
                    }
                    
                    .Playlist-btn:hover {
                        background-color: rgb(86, 185, 251);
                        transition: 250ms ease-out;
                        color: rgb(13, 39, 68);
                        cursor: pointer;
                    }
                    
                    .Playlist-btnn:hover {
                        background-color: rgb(98, 57, 2);
                        transition: 250ms ease-out;
                        box-shadow: 5px 4px 10px rgb(21, 63, 131);
                        cursor: pointer;
                        color: rgb(255, 239, 93);
                    }
                    
                    .Playlist-btn-bt {
                        padding: 20px 55px;
                        font-size: 25px;
                        border-radius: 30px;
                        border: 3.5px solid rgb(6, 71, 20);
                        box-shadow: 5px 4px 10px;
                        background-color: rgb(1, 138, 23);
                        color: rgb(223, 249, 255);
                    }
                    
                    .Playlist-btn-bt:hover {
                        background-color: rgb(156, 255, 90);
                        transition: 250ms ease-out;
                        cursor: pointer;
                        color: rgb(8, 59, 16);
                        z-index: 1;
                    }
                    
                    .play {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        z-index: 1;
                    }
                    
                    .Play-btn {
                        margin-top: -385px;
                        opacity: 65%;
                        z-index: 1;
                    }
                    
                    .Play-btn:hover {
                        transition: 0.7s ease-out;
                        opacity: 90%;
                        cursor: pointer;
                        animation: backwards;
                    }
                    
                    .Play-btn:active {
                        transform: translateY(80px);
                        box-shadow: 0px 2px 1px #fff;
                    }
                    
                    .allpara {
                        display: flex;
                        flex-direction: column;
                        margin-right: 250px;
                        margin-left: 250px;
                        text-align: center;
                        margin-top: 20px;
                        font-size: 20px;
                        font-family: 'Baloo 2', cursive;
                        border: 2px solid rgb(179, 143, 97);
                        border-radius: 12px;
                        box-shadow: 1px 3px 15px rgb(83, 68, 54);
                        padding: 30px;
                        background-color: rgb(255, 240, 220);
                    }
                    
                    .onepara {
                        margin: 15px;
                    }
                    
                    .contac-can {
                        text-align: center;
                        padding: 50px;
                        margin-left: 80px;
                        margin-right: 80px;
                        margin-top: 80px;
                        font-family: 'Baloo 2', cursive;
                        font-size: 25px;
                        border: 3px solid rgba(21, 54, 105, 0.397);
                        border-radius: 50px;
                        box-shadow: 5px 2px 6.5px rgba(0, 0, 0, 0.472);
                        background-color: turquoise;
                    }
                    
                    .contac-two {
                        text-align: center;
                        padding: 50px;
                        margin-left: 80px;
                        margin-right: 80px;
                        margin-top: 80px;
                        font-family: 'Baloo 2', cursive;
                        font-size: 25px;
                        border: 3px solid rgba(21, 54, 105, 0.397);
                        border-radius: 50px;
                        box-shadow: 5px 2px 6.5px rgba(0, 0, 0, 0.472);
                        background-color: turquoise;
                    }
                    
                    .contact {
                        background-color: rgb(255, 255, 255);
                        height: 800px;
                        margin-top: 10px;
                        border-radius: 95px;
                        background-color: rgb(230, 230, 75);
                    }
                    
                    .btn-dark {
                        color: black;
                        border-radius: 3px solid black;
                        padding: 8px 20px;
                        border-radius: 9px;
                    }
                    
                    .text-center {
                        text-align: center;
                        padding: 30px;
                        font-family: 'Baloo 2', cursive;
                        font-size: 35px;
                    }
                    
                    .form {
                        max-width: 1000px;
                        margin: auto;
                    }
                    
                    .form-input {
                        margin: 14px 0px;
                        padding: 5px 3px;
                        width: 100%;
                        font-size: 20px;
                        border: 2px solid black;
                        border-radius: 6px;
                        font-family: 'Baloo 2', cursive;
                    }
                    
                    .main-contant {
                        margin-left: 250px;
                        margin-right: 250px;
                        border: 5px solid rgba(21, 54, 105, 0.397);
                        border-radius: 100px;
                        box-shadow: 5px 2px 6.5px rgba(0, 0, 0, 0.472);
                        background-color: rgb(230, 230, 75);
                    }
                    
                    .footer {
                        font-size: 20px;
                        /*   text-align: center; */
                        font-family: 'Baloo 2', cursive;
                    }
                    
                    .footer1 {
                        width: 60%;
                        font-size: 20px;
                        font-family: 'Baloo 2', cursive;
                        margin-right: 25%;
                        background-color: rgb(214, 124, 124);
                        text-align: center;
                        border: 1px solid black;
                    }
                    
                    .footer2 {
                        width: 38;
                        font-size: 20px;
                        font-family: 'Baloo 2', cursive;
                        margin-left: 60%;
                        margin-top: -8.5%;
                        background-color: rgb(232, 252, 161);
                        text-align: center;
                        border: 1px solid black;
                    }
                    
                    .footer2 li {
                        list-style: none;
                        margin-left: 50%;
                    }
                    
                    .largefooter {
                        font-size: 25px;
                        color: black;
                    }
                    
                    @media only screen and (max-width: 1323px) {
                        .nav-list {
                            flex-direction: column;
                        }
                        .navbar {
                            height: 500px;
                            flex-direction: column;
                            transition: 1ms ease-out;
                        }
                        .burger {
                            display: block;
                        }
                        .h-nav-resp {
                            height: 35%;
                        }
                        .v-class-resp {
                            opacity: 0;
                        }
                        .character-img {
                            width: auto;
                            height: auto;
                        }
                        .text {
                            padding: 0;
                        }
                        .passage {
                            padding: 0;
                            margin: -120px;
                            margin-top: 25px;
                        }
                        .home-text {
                            width: 100%;
                        }
                        .container3 {
                            flex-direction: column;
                        }
                        .container4 {
                            flex-direction: column;
                        }
                        .allpara {
                            text-align: center;
                            align-items: center;
                            justify-content: center;
                            text-align: center;
                            margin-left: 5px;
                            margin-right: 5px;
                            margin-top: 10px;
                            margin: 0px;
                        }
                        .main-contant {
                            margin-left: 5px;
                            margin-right: 0px;
                            border: 2px solid rgba(21, 54, 105, 0.397);
                            border-radius: 0px;
                            background-color: rgb(230, 230, 75);
                        }
                        .contact {
                            background-color: rgb(230, 230, 75);
                        }
                        .contac-can {
                            margin-left: 20px;
                            margin-right: 20px;
                        }
                        .onepara {
                            margin: 10px;
                        }
                        .contac-two {
                            margin-left: 20px;
                            margin-right: 20px;
                        }
                        .holdingcontainer {
                            width: 35%;
                            flex-direction: column;
                            margin-top: -200px;
                        }
                        .holdingcontainer2 {
                            width: 35%;
                            margin-top: 25px;
                            flex-direction: column;
                        }
                        .holdingcontainer3 {
                            width: 45%;
                            flex-direction: column;
                        }
                        .head-diveder {
                            font-size: 30px;
                        }
                        .character-img {
                            width: 50%;
                            margin-bottom: -690px;
                            text-align: center;
                        }
                    }
                    
                    @media only screen and (min-width: 2066px) {
                        .character-img {
                            margin-top: -5px;
                            width: 45%;
                        }
                    }
                    
                    @media only screen and (max-width: 375px) {
                        .head-diveder {
                            font-size: 25px;
                        }
                    }